<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h6>{{ title }}</h6>
    <button @click="handleClick">Click Me</button>  
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    // 接收来自父组件的数据
    msg: String
  },  
  data() {  
    return {  
      // 组件的局部状态  
      title: "组件内部数据"  
    };  
  },  
  methods: {  
    // 组件的方法  
    handleClick() {  
      this.title = 'Button Clicked!';  
    }  
  }  
  // 还可以包含计算属性、生命周期钩子、监听器等  
}
</script>

<style scoped>
button {  
  padding: 10px 20px;  
  font-size: 16px;  
} 
</style>
